import { Layout, Input, Space, Button, message, Radio } from 'antd';
import styles from './index.less';
import React, { useState } from 'react';
import { element } from 'prop-types';



const { Sider, Content } = Layout;
const { TextArea } = Input

export default () => {

    const regexList = [
        {
            "name": "Email地址",
            "regex": "^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$"
        },
        {
            "name": "域名",
            "regex": "[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\\.?"
        },
        {
            "name": "网址Url",
            "regex": "[a-zA-z]+://[^\\s]*"
        },
        {
            "name": "IP地址",
            "regex": "((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))"
        },
        {
            "name": "网址Url2",
            "regex": "^((https|http|ftp|rtsp|mms)?:\\/\\/)[^\\s]+"
        },
        {
            "name": "手机号码",
            "regex": "^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"
        },
        {
            "name": "电话号码",
            "regex": "^(\\(\\d{3,4}-)|\\d{3.4}-)?\\d{7,8}$"
        },
        {
            "name": "国内电话号码",
            "regex": "((\\d{11})|^((\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})|(\\d{4}|\\d{3})-(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1})|(\\d{7,8})-(\\d{4}|\\d{3}|\\d{2}|\\d{1}))$)"
        },
        {
            "name": "身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X",
            "regex": "(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)"
        },
        {
            "name": "中国邮政编码",
            "regex": "[1-9]\\d{5}(?!\\d)"
        },
        {
            "name": "帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)",
            "regex": "^[a-zA-Z][a-zA-Z0-9_]{4,15}$"
        },
        {
            "name": "密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)",
            "regex": "^[a-zA-Z]\\w{5,17}$"
        },
        {
            "name": "强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)",
            "regex": "^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$"
        },
        {
            "name": "强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)",
            "regex": "^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"
        },
        {
            "name": "日期格式",
            "regex": "^\\d{4}-\\d{1,2}-\\d{1,2}"
        },
        {
            "name": "中文字符",
            "regex": '[\\u4e00-\\u9fa5]',
            "formatString": (regex) => {
                var str = '';
                for (var i = 0; i < regex.length; i++) {
                    str += regex[i] ;
                }
                return str;
            }
        },
        {
            "name": "HTML标记的正则表达式",
            "regex": "<(\\S*?)[^>]*>.*?|<.*? />"
        },
        {
            "name": "空白行的正则表达式",
            "regex": "\\n\\s*\\r"
        },
        {
            "name": "正整数",
            "regex": "^[1-9]\\d*$"
        },
        {
            "name": "负整数",
            "regex": "^-[1-9]\\d*$"
        },
        {
            "name": "整数",
            "regex": "^-?[1-9]\\d*$"
        },
        {
            "name": "非负整数",
            "regex": "^[1-9]\\d*|0$"
        },
        {
            "name": "非正整数",
            "regex": "^-[1-9]\\d*|0$"
        },
        {
            "name": "正浮点数",
            "regex": "^[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*$"
        },
        {
            "name": "负浮点数",
            "regex": "^-[1-9]\\d*\\.\\d*|-0\\.\\d*[1-9]\\d*$"
        },
    ]
    const [regexValue, setRegexValue] = useState()
    const [text, setText] = useState()
    const [matchText, setMatchText] = useState()
    const [replaceText, setReplaceText] = useState()
    const [replacePlace, setReplacePlace] = useState("")
    const [regexType, setRegexType] = useState("g")


    const clickRegexTemplate = (value) => {
        console.log(value)
        if (value.formatString) {
            setRegexValue(value.formatString(value.regex));
        } else {
            setRegexValue(value.regex);
        }
       
    }

    const clickRegexMetch = () => {
        if (!regexValue || regexValue == "") {
            message.warning('正则表达式为空');
            return
        }
        if (!text || text == "") {
            message.warning('内容为空');
            return
        }
        console.log(regexType)
        let regex = new RegExp(regexValue, regexType);
        console.log(regex)
        let result = text.match(regex);
        console.log(result)
        if (!result) {
            setMatchText("没有匹配到");
            return;
        }
        let matchText = `共匹配到:${result.length}\n`;

        result.forEach((item) => {
            console.log(item)
            matchText += `${item}\n`;
        })

        setMatchText(matchText);
    }

    const doReplaceRegex = () => {
        if (!regexValue || regexValue == "") {
            message.warning('正则表达式为空');
            return
        }
        if (!text || text == "") {
            message.warning('内容为空');
            return
        }
        console.log(regexType)
        let regex = new RegExp(regexValue, regexType);
        console.log(regex)
        setReplaceText(text.replace(regex,replacePlace))
    }

    const regexTemplateList = (
        <div style={{
            overflow: 'auto',
            height: '100vh',
        }}>
            <div style={{
                margin: 10,
                fontSize: 20,
            }}>常用正则表达式</div>
            {
                regexList.map((regex) => {
                    return (<div onClick={() => clickRegexTemplate(regex)}
                        className={styles.templateItem}
                        key={regex.name} >{regex.name}</div>)
                })
            }
        </div>
    )
    

    return (
        <div>
            <Layout className={styles.container}>
                <Content>
                    <Space className={styles.form} direction="vertical">
                        <div>正则表达式测试</div>
                        <div>
                            <TextArea autoSize={{ minRows: 5, maxRows: 10 }}
                                placeholder="输入文本"
                                className={styles.textArea}
                                onChange={
                                    (e) => {
                                        setText(e.target.value)
                                    }
                                }></TextArea>
                        </div>
                        <div>
                            <Space>
                                正则:
                                <Input value={regexValue} onChange={
                                    (e) => {
                                        e.persist()
                                        setRegexValue(e.target.value)
                                    }
                                }></Input>
                                <Radio.Group onChange={(e) => {
                                    setRegexType(e.target.value)
                                }} value={regexType}>
                                    <Radio value={'g'}>是否全局</Radio>
                                    <Radio value={'i'}>是否兼容大小写</Radio>
                                    <Radio value={'m'}>是否多行</Radio>
                                </Radio.Group>
                                <Button type="primary" onClick={clickRegexMetch}>匹配</Button>
                            </Space>
                            <div>
                                匹配结果:
                            </div>
                            <div>
                                <TextArea disabled={true} autoSize={{ minRows: 5, maxRows: 10 }} className={styles.textArea} value={matchText}></TextArea>
                            </div>
                        </div>
                        <div>
                            <Space>
                                替换:
                                <Input onChange={(e) => {
                                    setReplacePlace(e.target.value)
                                }}></Input>
                                <Button type="primary" onClick={doReplaceRegex}>替换</Button>
                            </Space>
                            <div>
                                替换结果:
                            </div>
                            <div>
                                <TextArea disabled={true} autoSize={{ minRows: 5, maxRows: 10 }} className={styles.textArea} value={replaceText}></TextArea>
                            </div>
                        </div>
                    </Space>
                </Content>
                <Sider width="300" >
                    {regexTemplateList}
                </Sider>
            </Layout>
        </div>
    )
}